import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image, StatusBar, Platform} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {useAuthStore} from '../../store/authStore';
import Icon from 'react-native-vector-icons/Ionicons';
import hairlineWidth = StyleSheet.hairlineWidth;

export const MyScreen = () => {
    const navigation = useNavigation();
    // 修复：分开调用 selector，避免在单次调用中创建新对象
    const userInfo = useAuthStore((state) => state.userInfo);
    const clearAuth = useAuthStore((state) => state.clearAuth);

    const handleLogout = () => {
        clearAuth(); // 清除所有认证状态
        navigation.reset({
            index: 0,
            routes: [{name: 'Login'}],
        });
    };

    if (!userInfo) {
        return (
            <View style={styles.container}>
                <Text>无法加载用户信息...</Text>
            </View>
        );
    }

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Image
                    style={styles.avatar}
                    source={require('../../assets/images/default.png')}
                />
                <View style={styles.userInfoContainer}>
                    <Text style={styles.nickname}>{userInfo.nickname || '未设置昵称'}</Text>
                    <Text style={styles.dept}>{userInfo.deptNamesStr || '暂无部门信息'}</Text>
                </View>
            </View>

            <View style={styles.menuContainer}>
                <TouchableOpacity style={styles.menuItem}>
                    <Icon name="person-circle-outline" size={24} color="#555"/>
                    <Text style={styles.menuItemText}>个人资料</Text>
                    <Icon name="chevron-forward-outline" size={20} color="#ccc"/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.menuItem}>
                    <Icon name="settings-outline" size={24} color="#555"/>
                    <Text style={styles.menuItemText}>设置</Text>
                    <Icon name="chevron-forward-outline" size={20} color="#ccc"/>
                </TouchableOpacity>
            </View>

            <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
                <Text style={styles.logoutButtonText}>退出登录</Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        marginTop: StatusBar.currentHeight,
        flex: 1,
        backgroundColor: '#F4F5F7',
    },
    header: {
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        alignItems: 'center',
        padding: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#EFEFEF',
    },
    avatar: {
        width: 70,
        height: 70,
        borderRadius: 35,
    },
    userInfoContainer: {
        marginLeft: 15,
    },
    nickname: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#111',
    },
    dept: {
        fontSize: 14,
        color: '#666',
        marginTop: 5,
    },
    menuContainer: {
        marginTop: 20,
        backgroundColor: '#FFFFFF',
    },
    menuItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#F5F5F5',
    },
    menuItemText: {
        flex: 1,
        marginLeft: 15,
        fontSize: 16,
        color: '#333',
    },
    logoutButton: {
        marginTop: 30,
        marginHorizontal: 20,
        backgroundColor: '#FF3B30',
        paddingVertical: 15,
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    logoutButtonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
});